<script setup lang="ts">
import { Checkbox } from './checkbox'

defineOptions({
  name: 'FaCheckbox',
})

defineProps<{
  disabled?: boolean
}>()

const value = defineModel<boolean>()

const id = useId()
</script>

<template>
  <div class="flex-center-start gap-2">
    <Checkbox :id v-model:checked="value" :disabled />
    <label :for="id" class="cursor-pointer text-sm">
      <slot />
    </label>
  </div>
</template>
